<template>
    <div class="checkMsg">
        <div>
            <span class="checkMsg_title">业绩会员编号</span>
            <el-input clearable class="checkMsg_num">
            </el-input>
        </div>
        <div>
            <span class="checkMsg_title">下单会员编号</span>
            <el-input clearable class="checkMsg_num">
            </el-input>
        </div>
        <div>
            <span class="checkMsg_title">服务中心编号</span>
            <el-input clearable class="checkMsg_num">
            </el-input>
        </div>
        <div>
            <span class="checkMsg_title">订单编号</span>
            <el-input clearable class="checkMsg_num">
            </el-input>
        </div>
        <div>
            <span class="checkMsg_title">订单类型</span>
            <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
            </el-select>
        </div>
        <div>
            <div class="checkMsg_title">下单日期</div>
            <el-date-picker
              v-model="time"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2">
            </el-date-picker>
        </div>
        <div>
          <div class="checkMsg_title">业绩月份</div>
          <el-date-picker
            v-model="time2"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2">
          </el-date-picker>
        </div>
        <div>
            <el-button type="primary" style="margin-left:300px;margin-top:20px" @click="isShowOrder = true">查询</el-button>
        </div>

        <div v-show="isShowOrder">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="a1"
                label="业绩会员编码/姓名">
                </el-table-column>
                <el-table-column
                prop="a2"
                label="订单号码">
                </el-table-column>
                <el-table-column
                prop="a3"
                label="订单类型">
                </el-table-column>
                <el-table-column
                prop="a4"
                label="下单日期">
                </el-table-column>
                <el-table-column
                prop="a5"
                label="业绩月份">
                </el-table-column>
                <el-table-column
                prop="a6"
                label="订单金额">
                </el-table-column>
                <el-table-column
                prop="a7"
                label="现场折扣金额">
                </el-table-column>
                <el-table-column
                prop="a8"
                label="实付金额">
                </el-table-column>
                <el-table-column
                prop="a9"
                label="订单PV">
                </el-table-column>
                <el-table-column
                prop="a10"
                label="实得PV">
                </el-table-column>
                <el-table-column
                prop="a11"
                label="状态">
                </el-table-column>
                <el-table-column
                prop="a12"
                label="下单会员编号/姓名">
                </el-table-column>
                <el-table-column
                prop="a13"
                label="服务中心编号">
                </el-table-column>
                <el-table-column
                prop="a14"
                label="操作员编号">
                </el-table-column>
                <el-table-column
                prop="a15"
                label="下单渠道">
                </el-table-column>
                <el-table-column
                label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="isShowDetail = true">明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <img src="../../assets/orderDetail.png" alt="" v-show="isShowDetail">        
        </div>

        <div class="page_word">OMS-2-1</div>

    </div>
</template>
<script>
export default {
    data(){
        return{
            options:["类型一","类型二","类型三"],
            tableData:[
                {
                    a1:"2663472/林小小",
                    a2:"8B263100841",
                    a3:"普通",
                    a4:"2018-9-3",
                    a5:"2018-03",
                    a6:"522.00",
                    a7:"23",
                    a8:"419.00",
                    a9:"376",
                    a10:"376",
                    a11:"已退货",
                    a12:"4565481/林小小",
                    a13:"8B",
                    a14:"P102",
                    a15:"商城"
                }
            ],
            isShowOrder:false,
            isShowDetail:false,


            personNumber:"",
            personName:"",
            time:"",
            time2:"",
            pickerOptions2: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            
        }
    },
    methods:{
        search(){
            this.$router.push({path:"/index/orderList"})
        }
    }
}
</script>
<style scoped>
.checkMsg_num{
    width:350px!important;
}
.checkMsg_title{
    display: inline-block;
    width: 200px;
    font-size: 20px;
    padding: 10px 0;
    font-weight: bold;
    margin-top:10px
}

</style>


